<template>
  <div class="btn-gloup">
    <template v-if="option && option.length > 0">
      <div
        class="btn-item"
        v-for="(item, index) in option"
        :class="{ active: clickIndexs.includes(index) }"
        :key="item.value"
        @click="($event) => clickSIndex(item, index)"
      >
        {{ item.value }}
      </div>
    </template>
    <div v-else class="no-data">暂无数据</div>
  </div>
</template>

<script>
import fetch from "@/utils/fetch";
export default {
  props: {
    value: {
      type: Array,
      required: true,
      defulat: [],
    },
    multiple: Boolean,
    dictCode: String,
    arr: {
      type: Array,
      defulat: () => [
        {
          label: "",
          value: "",
        },
      ],
    },
  },
  data() {
    return {
      selecteValues: [],
      selecteData: [],
      clickIndexs: [],
      option: [],
      model: {},
    };
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        this.initData();
      },
      immediate: true,
    },
    dictCode: {
      handler(newValue, oldValue) {
        if (!(this.option && this.option.length > 0))
          this.initDictData(newValue);
      },
      immediate: true,
    },
    arr: {
      handler(newValue, oldValue) {
        if (this.arr && this.arr.length > 0) this.option = this.arr || [];
        this.initData();
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    initData() {
      let that = this;
      const option = that.option;
      if (option && option.length > 0) {
        that.selecteValues = [];
        that.clickIndexs = [];
        that.selecteData = [];
        if (that.value && that.value.indexOf(",") > 0) {
          const arr = that.value.split(",");
          arr.forEach((val) => {
            const i = option.findIndex(
              (item) => data.enValue == val || item.value == val
            );
            if (i !== -1) {
              that.selecteValues.push(option[i].enValue || option[i].value);
              that.clickIndexs.push(i);
              that.selecteData.push(option[i]);
            }
          });
        } else {
          const i = option.findIndex(
            (item) => item.enValue == that.value || item.value == that.value
          );
          if (i !== -1) {
            that.selecteValues = [option[i].enValue || option[i].value];
            that.clickIndexs = [i];
            that.selecteData = [option[i]];
          }
        }
      }
    },
    initDictData(str) {
      const that = this;
      if (str) {
        fetch("get", "/dms/faultCategory/dictList", {
          name: str,
        }).then((res) => {
          that.option = res.data;
          this.initData();
          that.$nextTick(() => {
            that.$emit("mounted");
          });
        });
      }
    },
    clickSIndex(data, index) {
      const that = this;
      if (that.multiple) {
        const i = that.clickIndexs.findIndex((item) => item == index);
        console.log("clickIndexs.includes(index)", that.clickIndexs, i);
        if (i !== -1) {
          that.clickIndexs.splice(i, 1);
          that.selecteValues.splice(i, 1);
          that.selecteData.splice(i, 1);
        } else {
          that.clickIndexs.push(index);
          that.selecteValues.push(data.enValue || data.value);
          that.selecteData.push(data);
        }
      } else {
        if (that.clickIndexs[0] == index) {
          that.clickIndexs.splice(0, 1);
          that.selecteValues.splice(0, 1);
          that.selecteData.splice(0, 1);
        } else {
          that.clickIndexs[0] = index;
          that.selecteValues[0] = data.enValue || data.value;
          that.selecteData[0] = data;
        }
        console.log("clickIndexs.includes(index)", that.clickIndexs, index);
      }
      that.$emit("change", that.selecteData);
      that.$emit("input", that.selecteValues);
      that.create = false;
    },
  },
};
</script>
<style scoped lang="scss">
.btn-gloup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  .btn-item {
    height: 50rpx;
    line-height: 50rpx;
    margin-bottom: 10px;
    /* width: 40px; */
    padding: 0 20rpx;
    text-align: center;
    border: 1px solid #e0e0e0;
    background-color: ■#f7f8fc;
    margin-right: 20rpx;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .active {
    color: #5170e5;
    background-color: ■#ffffff;
  }
}
</style>
